<style media="screen">
    .weui-dialog {
        max-width: 400px;
    }

    .weui-dialog__bd {
        max-height: 75vh;
        overflow: scroll;
    }

    #id-type-qusetion {
        cursor: pointer;
    }

    .fixed-block {
        background: #fff;
        max-width: 640px;
    }
    .form-top {
        padding-bottom: 15px;
    }
    .form-top h4 {
        font-size: 20px;
        margin-bottom: 5px;
    }
    .notice {
        border: 1px solid #0036AD;
        margin-bottom: 20px;
    }
    .step-hud {
        padding: 10px 0;
    }
    .step-hud .progress {
        width: 85%;
        margin: 0 auto;
    }
    .form-block {
        padding-bottom: 15px;
    }
    .form-block .form-title{
        border-left: 4px solid #3498DB;
        padding-left: 5px;
        margin: 10px 0px 5px 0;
        line-height: 23px;
        font-size: 19px;
    }
    .form-block .form-sub-title {
        margin-bottom: 5px;
        font-size: 14px;
    }
    .form-block .form-sub-title span {
        line-height: 22px;
    }
    .date-birthday .form-control, #home-address1, #school3 {
        border-color: #bdc3c7;
        color: #34495e;
        opacity: 1;
    }
    .form-group {
        margin-bottom: 10px;
    }

    .select.form-control, .select.select2-search input[type=text] {
        border: 2px solid #bdc3c7;
    }

    .form-group select {
        border: 2px solid #bdc3c7;
        height: 35px!important;
        min-width: unset;
    }
    .form-group .input-group-addon {
        padding: 5px;
        background: none;
        color: #666;
    }
    .border-red, .error {
        border-color: red!important;
        background-color: #ffcdcd!important;
    }
    .text-danger {
        color: #e74c3c!important;
    }
    .weui-dialog__bd {
        overflow: auto;
    }
</style>

<div>
    <form action="javascript:;" method="get" name="theForm" id="theForm">
        <div class="notice row fixed-block hide">
            <div class="col-xs-12"><div class="text-center"><small>请确认您的信息正确无误并参加活动。</small></div></div>
        </div>

        <div class="form-top row fixed-block">
            <div class="col-xs-12"><h4 class="text-center"><span id="ac_name"></span>报名登记表</h4></div>
            <div class="col-xs-12"><div class="text-center"><small class="text-danger">(注：红色字体部分为必填项目)</small></div></div>
        </div>
        <hr class="fixed-block">

        <div class="step step1 form-block row fixed-block hide">
            <input id="volunteer" type="hidden" value="<?php echo $_REQUEST['volunteer']; ?>">
            <div class="col-xs-12"><h6 class="form-title">幼儿报名信息</h6></div>

            <div class="col-xs-12 col-sm-4">
                <p class="text-danger form-sub-title">幼儿姓名<span class="fui-alert-circle hide"></span></p>
                <div class="form-group">
                    <input id="user-name" name="user-name" type="text" value="" placeholder="" class="form-control input-sm">
                </div>
            </div>

            <div class="col-xs-12 col-sm-4">
                <p class="text-danger form-sub-title">性别</p>
                <div class="form-group">
                    <select id="user-sex" name="user-sex" data-default="1" class="form-control select select-default select-block">
                    <option value="1">男</option>
                    <option value="2">女</option>
                    </select>
                </div>
            </div>

            <div class="col-xs-12 col-sm-4">
                <p class="text-danger form-sub-title">出生日期</p>
                <div class="form-group">
                    <div class="date-birthday input-group date" data-date="" data-date-format="dd MM yyyy" data-link-field="user-birthday" data-link-format="yyyy-mm-dd">
                        <input class="form-control input-sm" name="user-birthday" size="16" type="text" value="" readonly>
                        <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="user-birthday" value="" />
                </div>
            </div>

            <div class="col-xs-12 col-sm-6">
                <p class="text-danger form-sub-title">证件类型 <span id="id-type-qusetion" class="fui-question-circle"></span></p>
                <div class="form-group">
                    <select id="id-type" name="id-type" data-default="1" class="form-control select select-default select-block" required>
                    <option value="1">居民身份证</option>
                    <option value="2">香港居民身份证</option>
                    <option value="3">澳门居民身份证</option>
                    <option value="4">护照</option>
                    </select>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6">
                <p class="text-danger form-sub-title">证件号码</p>
                <div class="form-group">
                    <input id="user-id" name="user-id" type="text" value="" placeholder="" class="form-control input-sm">
                </div>
            </div>

            <div class="col-xs-12 col-sm-3">
                <p class="text-danger form-sub-title">报读意向</p>
                <div class="form-group">
                    <select id="class-choice" name="class-choice" class="form-control select select-default select-block">
                    <option value="">报读意向</option>
                    <option value="1">国语班</option>
                    <option value="2">国际班</option>
                    <option value="3">两者均可</option>
                    </select>
                </div>
            </div>

            <div class="col-xs-12 col-sm-3">
                <p class="text-danger form-sub-title">报读年级</p>
                <div class="form-group">
                    <select id="grade-choice" name="grade-choice" class="form-control select select-default select-block">
                    <option value="">报读年级</option>
                    <option value="1">小小班</option>
                    <option value="2">小班</option>
                    <option value="3">中班</option>
                    <option value="4">大班</option>
                    </select>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12">
                <p><small>如果您对报读年龄段选项有疑问，请拨打招生办咨询电话：22326131/22326128。</small></p>
            </div>
        </div>
        <hr class="step step1 fixed-block hide">

        <!-- <div class="qrcode form-block row fixed-block hide">
            <div class="col-xs-12"><h6 class="form-title">家长微信扫码绑定账号</h6></div>
            <div class="col-xs-12"><p class="form-sub-title">绑定后可在【广东顺德德胜幼儿园】微信公众号免登录查询面谈成绩</p></div>
            <div class="col-xs-6">
                <div class="content text-right">

                </div>

            </div>
    		<div class="col-xs-6  text-left">
                <div class="">
    				<img id="wx_headimage" src='' style="border-radius:3px;"/>
    				<p id="wx_nickname">请使用微信扫描二维码</p>
                </div>
            </div>
        </div>
        <hr class="qrcode fixed-block hide"> -->

        <div class="form-block row fixed-block text-center">
              <small>
                  <label class="checkbox" for="allow-submit" style="display: inline-block">
                    <input type="checkbox" value="" id="allow-submit" data-toggle="checkbox">
                      本人保证已如实填写报名信息，如有虚假或造假情况，自愿承担所有后果。
                  </label>
              </small>

        </div>

        <div class="form-block row fixed-block" style="padding-bottom: 100px;">
            <div class="col-xs-12 text-center">
                <button id="prev-step" class="btn btn-sm btn-info hide">上一步</button>
                <button id="next-step" class="btn btn-sm btn-info hide">下一步</button>
                <button id="submit" class="btn btn-sm btn-info hide">
                  提交
                </button>
                <div id="submit-loading" class="weui-loadmore hide">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在提交</span>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    $(function() {
        // 前端框架checkbox问题解决 start
        $(':checkbox').radiocheck().on('change.radiocheck', function(e) {
            if (e.currentTarget.checked == true) {
                $(this).attr('checked', 'checked');
            } else {
                $(this).removeAttr('checked');
            }
        });
        $('#allow-submit').radiocheck('check');
        // 前端框架checkbox问题解决 end

		$.modal({
			title: "提示",
			text: "数据正在加载",
			buttons: []
		});



        // 字段对应表单id
        var mainInfo = {
            'name': '#user-name',
            'sex': '#user-sex',
            'identity_type': '#id-type',
            'identity': '#user-id',
            'birth_date': '#user-birthday',
            'volunteer': '#class-choice',
            'add_class': '#grade-choice',
        };
        // 数据校验
        var pass = true;
        // 身份证重复校验
        var checkIdPass = true;
        var studentId = null;
        var form = $('#theForm');
        // 需要手机端分步骤
        var needStep = false;
        // 第几张表单 1报名 , 2注册 ,3预报名
        var stept = 1;
        // 表单回填
		var loadAcid = "<?php echo $_REQUEST['acid']; ?>"||'';
        var formValid = form.validate({
            errorPlacement:function(error, element){
                var error_div = element.parents('div.form-value').find('div.form_prompt');
                error_div.html("").append(error);
            },
            ignore : ".ignore",
            rules : {
                'user-name' : {
                    required : true,
                    minlength : 2
                },
                'id-type' : {
                    required : true,
                },
                'user-id' : {
                    required : true,
                    isIdCardNo: function() {
                        // 是居民身份证才验证
                        return $('#id-type').val() == 1 ? true : false
                    }
                },
                'user-birthday' : {
                    required : true
                },
                'class-choice' : {
                    required : true
                },
                'grade-choice' : {
                    required : true
                },
            },
            messages : {
                // consignee:{
                // 	required : json_languages.input_Consignee_name
                // },
                // mobile : {
                // 	required : json_languages.msg_phone_blank,
                // 	isMobile : json_languages.phone_format_error
                // },
            }
        });


        // 身份证类型 问题按钮
        $('#id-type-qusetion').on('click', function () {
            showIdCase(false);
        });

        // 生日选择器
        $('.date-birthday').datetimepicker({
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            weekStart: 1,
            todayBtn:  0,
    		autoclose: 1,
    		todayHighlight: 1,
    		startView: 4,
    		minView: 2,
    		forceParse: 0
        }).on('changeDate', function(ev) {
            disableClass();
        });

        // 提交按钮
        $('#submit').on('click', function() {
            // 没有点击通知
            if ($('#allow-submit').attr('checked') == undefined) {
                $.alert('请确认本人保证已如实填写报名信息， 并勾选');
                return;
            }

            if ($(this).hasClass('disabled')) {
                return;
            }
            pass = true;
            // 信息字段
            var info = {
                'student_id': studentId,
                'activitys': loadAcid,
                'add_phone': getCookie('user'),
                'stept': stept,
            }
            for (var i in mainInfo) {
                if (i == 'birth_date') {
                    info[i] = parseInt(Date.parse($('#user-birthday').val()) / 1000).toString();
                } else {
                    info[i] = $(mainInfo[i]).val();
                }
            }
            checkIdBirthday();
            console.log(info);
            if (pass == false || checkIdPass == false || form.valid() == false) {
                $.alert('请正确填写红框内容');
                return;
            }
            // return;


            $('#submit').addClass('disabled');
            $('#submit-loading').removeClass('hide');

            $.post(parameter.userInfoSend, info, function(data) {
                $('#submit').removeClass('disabled');
                $('#submit-loading').addClass('hide');
                var json = JSON.parse(data);
                switch (json.status) {
                    case 0:
                        $.toast("请勿提交重复数据", 'forbidden', function() {
                            console.log("失败");
                        });
                        break;
                    case 1:
                        var actId = "<?php echo $acid; ?>"|| null;
                        if (actId == null) {
                            // $.toast("提交成功", function() {
                            //     // window.location.href = './activity';
							// 	 window.location.href = '{:U("StudentApi/activity")}';
                            // });

                            $.alert({
                                title: '提交成功',
                                text: json.data.message1,
                                onOK: function() {
                                    //点击确认
                                    window.location.href = '{:U("StudentApi/activity")}';
                                }
                            });
                        } else {
                            // 报名活动
                            $.post(parameter.signActivity, {activity_id: actId, 'student_id': studentId, 'acti_time_id': $('#ac-time').val()}, function(data) {
                                // $.toast('提交成功', function() {
                                //     // window.location.href = './activity';
                                //      window.location.href = '{:U("StudentApi/activity")}';
                                // });
                                $.alert({
                                    title: '提交成功',
                                    text: json.data.message1,
                                    onOK: function() {
                                        //点击确认
                                        window.location.href = '{:U("StudentApi/activity")}';
                                    }
                                });
                            });
                        }
                        break;
                    // case -1:
                    //     $.toast("请扫码二维码", 'forbidden', function() {
                    //         console.log("失败");
                    //     });
                    //     break;
                    case '-2':
                        $.toast("该身份证已经报名，请勿重复报名。", 'forbidden', function() {
                            console.log("失败");
                        });
                        break;
                    case '-3':
                        $.toast("网络错误，请重新报名招生活动", 'forbidden', function() {
                            // window.location.href = "{:U('StudentApi/activity',array('type'=>''))}";
                            console.log("失败");
                        });
                        break;
                }
            });

        });

        // 两个日期的差多少年
        function datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
            var dateSpan,
                tempDate,
                iDays;
            sDate1 = Date.parse(sDate1);
            sDate2 = Date.parse(sDate2);
            dateSpan = sDate2 - sDate1;
            dateSpan = Math.abs(dateSpan);
            iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
            iYears = iDays / 365;
            return iYears
        };

        // 根据岁数设置报读年级disabled
        function disableClass() {
            var year = datedifference($('[name="user-birthday"]').val(), (new Date).getFullYear() + '-9-1');
            var select = $('#grade-choice');
            select.val('').find('option').removeAttr('disabled');

            if (year < 3) {
                select.find('option[value="2"]').attr('disabled', 'disabled');
                select.find('option[value="3"]').attr('disabled', 'disabled');
                select.find('option[value="4"]').attr('disabled', 'disabled');
            } else if (year >= 3 && year < 4) {
                select.find('option[value="1"]').attr('disabled', 'disabled');
                select.find('option[value="3"]').attr('disabled', 'disabled');
                select.find('option[value="4"]').attr('disabled', 'disabled');
            } else if (year >= 4 && year < 5) {
                select.find('option[value="1"]').attr('disabled', 'disabled');
                select.find('option[value="2"]').attr('disabled', 'disabled');
                select.find('option[value="4"]').attr('disabled', 'disabled');
            } else if (year >= 5) {
                select.find('option[value="1"]').attr('disabled', 'disabled');
                select.find('option[value="2"]').attr('disabled', 'disabled');
                select.find('option[value="3"]').attr('disabled', 'disabled');
            }
        };

        // 户籍是否在佛山切换
        $('#hometown-in-foshan').on('change', function() {
            hometownInFoshanSwitch();
        });


        // 选择非中国身份证时候弹出填写例子
        function showIdCase(flag) {
            if (flag) {
                $('#id-type').on('change',function() {
                    var isShow = true;
                    var imgSrc = '';
                    switch ($(this).val()) {
                        case '2':
                            console.log('香港');
                            imgSrc = '/Public/statics/desheng/img/hk.jpg';
                            break;
                        case '3':
                            console.log('澳门');
                            imgSrc = '/Public/statics/desheng/img/am.jpg';
                            break;
                        case '4':
                            console.log('护照');
                            imgSrc = '/Public/statics/desheng/img/hz.jpg';
                            break;
                        default:
                            isShow = false;
                            break;
                    }

                    if (isShow) {
                        $.modal({
                          title: "证件示例",
                          text: '<img style="width: 100%;" src="' + imgSrc + '">',
                          buttons: [
                            { text: "确认", className: "", onClick: function() {} },
                          ]
                        });
                    }
                });
            } else {
                $.modal({
                  title: "证件示例",
                  text: '\
                      <p>香港身份证：</p>\
                      <img style="width: 100%;" src="/Public/statics/desheng/img/hk.jpg">\
                      <br />\
                      <p>澳门身份证：</p>\
                      <img style="width: 100%;" src="/Public/statics/desheng/img/am.jpg">\
                      <br />\
                      <p>护照：</p>\
                      <img style="width: 100%;" src="/Public/statics/desheng/img/hz.jpg">\
                      <br />\
                  ',
                  buttons: [
                    { text: "确认", className: "", onClick: function() {} },
                  ]
                });

            }

        }

        // 检查身份证是否符合生日日期
        function checkIdBirthday() {
            // 非居民身份证不检查
            if ($('#id-type').val() != 1) {
                return true;
            }

            var birthday = $('#user-birthday').val().replaceAll('-', '');
            var idBirthday = $('#user-id').val().substr(6,8);
            if (idBirthday == birthday || birthday == '') {
                $('#user-id').removeAttr('data-check').removeClass('border-red');
                return true;
            } else {
                $('#user-id').attr('data-check', 'no').addClass('border-red');
                $.alert('身份证与出生日期不符');
                pass = false;
                return false;
            }
        }

        // 身份证查重
        function checkId() {
            if ($('#user-id').val() == '' || formValid.element('#user-id') == false) {
                $('#user-id').removeAttr('data-check').removeClass('border-red');
                return;
            }
            // if (checkIdBirthday() == false) {
            //     return;
            // }
            $.post(parameter.getIdentityExist, {student_id: studentId, identity: $('#user-id').val()}, function(data) {
                if (data == 1) {
                    checkIdPass = true;
                    $('#user-id').removeAttr('data-check').removeClass('border-red');
                    checkIdBirthday();
                } else {
                    checkIdPass = false;
                    checkIdBirthday();
                    $('#user-id').attr('data-check', 'no').addClass('border-red');
                    $.alert('该身份证已经报名，请勿重复报名。');
                }
            });
        }

        // 户籍选择器
        function hometownPicker() {
            $("#home-address1").cityPicker({
                title: "请选择详细地址"
            });
        }
        // hometownPicker();

        // 学校所在地址选择器
        function schoolAddressPicker() {
            $("#school3").cityPicker({
                title: "请选择所在地址"
            });
        }
        // schoolAddressPicker();

        // 户籍是否在佛山切换
        function hometownInFoshanSwitch() {
            switch ($('#hometown-in-foshan').val()) {
                case '1':
                    $('#hometown1').parent('.form-group').show();
                    $('#hometown2').parent('.form-group').hide();
                    break;
                case '2':
                    $('#hometown1').parent('.form-group').hide();
                    $('#hometown2').parent('.form-group').show();
                    break;
            }
        }

        $.post(parameter.userInfoGet, {add_phone: getCookie('user')}, function(data) {
            var json = JSON.parse(data);
            studentId = json.student_id;

            if (json.name && json.name != '') {
                // 已经填写过表单 需要回填
                for (var i in mainInfo) {
                    if (i == 'birth_date') {
                        // 生日
                        var birthday = (new Date(json.birth_date * 1000)).format('yyyy-MM-dd');
                        // console.log(birthday);
                        $('#user-birthday').val(birthday);
                        $('.date-birthday .form-control').val(birthday);
                        $('.date-birthday').datetimepicker('update');
                        disableClass();
                    } else {
                        // 防止回填的值比这个列表加载得要快
                        if (i == 'street' || i == 'graduate_street' || i == 'graduate_school') {
                            selectValue[i] = json[i];
                        }

                        // 处理回填select数据字段为空时设置默认值
                        var dataDefault = $(mainInfo[i]).attr('data-default');
                        if ((json[i] == '' || json[i] == 0) && dataDefault != undefined) {
                            $(mainInfo[i]).val(dataDefault);
                        } else {
                            $(mainInfo[i]).val(json[i]);
                        }
                    }
                }
                showIdCase(true);
                // hometownPicker();
                // schoolAddressPicker();
                // hometownInFoshanSwitch();

                $('#user-id').on('blur', function() {
                    checkId();
                });
                // 微信
				// var wx_info = JSON.parse(json['ws_info']);
				// $('#wx_headimage').attr('src',wx_info['headimgurl']);
				// $('#wx_nickname').html(wx_info['nickname']);

                // 锁定表格
                console.log(json.is_confirm);
                if (json.is_confirm == 1) {
                    disablForm();
                }
            } else {
                // 没有填写过表单 不用回填
                showIdCase(true);
                // hometownPicker();
                // schoolAddressPicker();
                // hometownInFoshanSwitch();
                $('#user-id').on('blur', function() {
                    checkId();
                });
            }

			$.closeModal();
        });


        // 禁用disabled表单
        function disablForm() {
            $('.notice').removeClass('hide').find('small').html('报名表已经确认，无法修改信息');
            for (var i in mainInfo) {
                // 不需要禁用的
                if (i == 'five1_yuwen' || i == 'five1_math' || i == 'five1_english' || i == 'five1_rank' || i == 'five2_yuwen' || i == 'five2_math' || i == 'five2_english' || i == 'five2_rank' || i == 'six1_yuwen' || i == 'six1_math' || i == 'six1_english' || i == 'six1_rank' || i == 'award_subject' || i == 'award_talent' || i == 'award_other') {
                    continue;
                }
                // console.log(mainInfo[i]);
                $(mainInfo[i]).attr('disabled', 'disabled').attr('readonly', 'readonly');
            }
            setTimeout(function() {
                $('.date-birthday').datetimepicker('remove');
            }, 300);
        }

        // 手机版 进度模式显示

        // 改变步骤
        function changeStep(stepIndex) {
            if (needStep == false) {
                $('#prev-step, #next-step').addClass('hide');
                $('.step1, #submit').removeClass('hide');
                return;
            }
            $('.step-hud .step-info').html('第' + stepIndex + '步(共4步)');
            $('.step-hud .progress-bar').css('width', stepIndex / 4 * 100 + '%');
            switch (stepIndex) {
                case 1:
                    $('.step, #prev-step, #next-step, #submit').addClass('hide');
                    $('.step' + stepIndex + ', #next-step').removeClass('hide');
                    break;
                case 4:
                    $('.step, #prev-step, #next-step, #submit').addClass('hide');
                    $('.step' + stepIndex + ', #prev-step, #submit').removeClass('hide');
                    break;
                default:
                    $('.step, #prev-step, #next-step, #submit').addClass('hide');
                    $('.step' + stepIndex + ', #prev-step, #next-step').removeClass('hide');
                    break;
            }
        }


        if (isMobile()) {
            var stepIndex = 1;
            $('.step-hud').removeClass('hide');
            changeStep(stepIndex);
            $('#prev-step').on('click', function() {
                stepIndex --;
                changeStep(stepIndex);
            });
            $('#next-step').on('click', function() {
                pass = true;
                switch (stepIndex) {
                    case 1:
                        check1();
                        break;
                    case 2:
                        check2();
                        break;
                    case 3:
                        check3();
                        break;
                    case 4:
                        check4();
                        break;
                }
                if (pass == false) {
                    $.alert('请正确填写红框内容');
                    return;
                }
                stepIndex ++;
                changeStep(stepIndex);
            });
        } else {
            // 二维码
            // $('.qrcode').removeClass('hide');
            // setQr('.qrcode .content');

            $('.step, #submit').removeClass('hide');
        }


    });
</script>
